<template>
  <div class="about">
    <div class="box clearfloat">
      <div class="leftList">
        <div class="head">{{title}}</div>
        <div class="itemList">
          <ul>
            <li
              @click="goInfo(item)"
              :style="active==item?'font-weight:bold;':''"
              v-for="item in leftMenu"
              :key="item.id"
            >
              <img src="../assets/ny-left-li.png" alt />
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>
      <div class="rightContent">
        <div class="thisNav">
          当前位置：
          <a>首页</a>
          &gt;&gt;
          <a>{{title}}</a>
          <span v-if="active">&gt;&gt;</span>
          <a>{{active}}</a>
        </div>
        <textInfo v-if="!listShow" ref="textInfo"></textInfo>
        <textList v-if="listShow" ref="textList" @getSunData="goListInfo"></textList>
      </div>
    </div>
  </div>
</template>
<script>
import textList from "../components/list.vue";
import textInfo from "../components/text.vue";
export default {
  components: {
    textInfo,
    textList
  },
  data() {
    return {
      textId: this.$route.query.textId || "",
      listId: this.$route.query.textListId || "",
      active: "",
      title: "",
      leftMenu: [],
      listShow: false
    };
  },
  mounted() {
    this.getLeftMenu();
  },
  watch: {
    "$route.params.id": function() {
      this.getLeftMenu();
    },
    "$route.query.listId": function() {
      let item = {id:this.$route.query.listId}
      this.goInfo(item);
    },
  },
  methods: {
    //从列表跳到详情
    goListInfo(textId) {
      this.listShow = false;
      this.$nextTick(() => {
        this.$refs.textInfo.id = textId;
      });
    },
    //跳转列表or详情
    goInfo(item) {
      
      this.active = this.$route.query.name;
      if (item.name) {
        this.active = item.name;
        console.log(item.name);
      }
      this.$axios.post("/OpenApi/articleList/" + item.id).then(res => {
        console.log(res);
        if (res.data.length > 1) {
          this.listShow = true;
          this.$nextTick(() => {
            this.$refs.textList.list = res.data;
          });
        } else if (res.data.length == 1) {
          this.listShow = false;
          this.$nextTick(() => {
            this.$refs.textInfo.id = res.data[0].id;
          });
        } else {
          this.listShow = false;
          this.$nextTick(() => {
            this.$refs.textInfo.id = "";
            this.$refs.textInfo.info = "";
          });
        }
      });
    },
    //左侧导航
    getLeftMenu() {
      this.$axios.post("/OpenApi/list").then(res => {
        console.log("导航栏", res.data);
        res.data.some(v => {
          if (v.item.id == this.$route.params.id) {
            this.title = v.item.name;
            this.leftMenu = v.childrens;
            if (this.$route.query.name) {
              this.active = this.$route.query.name;
            } else {
              this.active = v.childrens[0].name;
            }
          }
        });

        if (this.textId) {
          this.listShow=false
          this.$nextTick(()=>{
            this.$refs.textInfo.id = this.textId;
          })
        } else {
          let item = { id: this.$route.query.listId };
          this.goInfo(item);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.about {
  width: 1200px;
  margin: 20px auto;
  .box {
    .leftList {
      width: 225px;
      min-height: 300px;
      background-color: #fff;
      float: left;
      .head {
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 14px;
        background: url("../assets/ny-left-title.jpg") no-repeat 0px center;
      }
      .itemList {
        ul {
          padding: 0 14px;
          box-sizing: border-box;
          li {
            width: 100%;
            height: 40px;
            text-align: left;
            line-height: 40px;
            font-size: 12px;
            cursor: pointer;
            border-bottom: 1px dotted #c6c6c6;
            img {
              margin-right: 10px;
            }
          }
        }
      }
    }
    .rightContent {
      width: 950px;
      min-height: 500px;
      background-color: #fff;
      float: right;
      .thisNav {
        text-indent: 2em;
        text-align: left;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        background: url("../assets/ny-left-title.jpg") repeat 0px center;
        a {
          margin: 0 4px;
          // &:hover {
          //   text-decoration: underline;
          // }
        }
      }
    }
  }
}
</style>
